<template>
  <div class="w-full h-full">
    <!-- 参阅 https://www.w3school.com.cn/tags/tag_video.asp -->
    <video
      :src="props.url"
      :poster="props.poster"
      :controls="props.controls"
      :autoplay="props.autoplay"
      :loop="props.loop"
      :muted="props.muted"
      :preload="props.preload"
      :width="props.width"
      :height="props.height"
    ></video>
    <br v-if="props.title" />
    <el-text v-if="props.title">{{ props.title }}</el-text>
  </div>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'

/** 视频播放 */
defineOptions({ name: 'SimpleVideoPlayer' })

const props = defineProps({
  title: propTypes.string.def(''),
  url: propTypes.string.def(''),
  poster: propTypes.string.def(''),
  controls: propTypes.bool.def(true),
  autoplay: propTypes.bool.def(false),
  loop: propTypes.bool.def(false),
  muted: propTypes.bool.def(false),
  preload: propTypes.string.def('none'),
  width: propTypes.number.def(140),
  height: propTypes.number.def(140)
})

const options = ref({})

watch(
  () => props,
  (val: any) => {
    options.value = val
  }
)
</script>

<style scoped lang="scss">
/* 图片 */
img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
